<template>
  <div class="label-content">
    <labelContent title="基本信息">
      <div>
        <el-form
          ref="baseForm"
          :model="baseForm"
          :rules="rules1"
          label-width="130px"
        >
          <el-form-item label="会员套餐名称" prop="member_name">
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.member_name"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="折扣" prop="discount">
            <div>
              <el-input
                type="number"
                class="w300"
                placeholder="请输入"
                v-model="baseForm.discount"
              ></el-input>
              %
            </div>
            <div class="tip">输入90表示打9折，100%表示不打折.</div>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.price"
              ></el-input>
              元
            </div>
          </el-form-item>
          <el-form-item label="积分倍数" prop="multiple">
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.multiple"
              ></el-input>
            </div>
            <div class="tip">输入1.5表示积分1.5倍，输入0表示无积分.</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addOrModifyMemberConfigBase">保存基本信息</el-button>
          </el-form-item>
        </el-form>
      </div>
    </labelContent>
    <labelContent title="商品配置">
      <div>
        <el-table
          class="small-table mb16"
          :data="comboConfigList"
          border
          style="width: 100%"
        >
          <el-table-column label="权益序号">
            <template slot-scope="scope">
              {{ scope.row.benefit_rank }}
            </template>
          </el-table-column>
          <el-table-column label="权益图片">
            <template slot-scope="scope">
              <img class="img1" :src="imgUrl+scope.row.benefit_img" alt="">
            </template>
          </el-table-column>
          <el-table-column label="权益名称">
            <template slot-scope="scope">
              {{ scope.row.benefit_name }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openDlg('1', scope.row)"
                ><i class="iconfont icon-edit"></i>编辑</el-button
              >
              <el-button type="text" @click="del('1', scope.row)"
                ><i class="iconfont icon-del"></i>删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button
            type="primary"
            size="medium"
            @click="openDlg('1')"
            ><i class="iconfont icon-plus"></i>添加</el-button
          >
        </div>
      </div>
    </labelContent>

    <labelContent title="优惠券赠送配置">
      <div>
        <el-table
          class="small-table mb16"
          :data="comboCouponList"
          border
          style="width: 100%"
        >
          <el-table-column label="标签分类">
            <template slot-scope="scope">
              {{ scope.row.series_name }}
            </template>
          </el-table-column>
          <el-table-column label="优惠券名称">
            <template slot-scope="scope">
              {{ scope.row.coupon_name }}
            </template>
          </el-table-column>
          <el-table-column label="单笔满减">
            <template slot-scope="scope">
              {{ scope.row.reduction_money }}
            </template>
          </el-table-column>
          <el-table-column label="发送张数">
            <template slot-scope="scope">
              {{ scope.row.sum_count }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openDlg('2', scope.row)"
                ><i class="iconfont icon-edit"></i>编辑</el-button
              >
              <el-button type="text" @click="del('2', scope.row)"
                ><i class="iconfont icon-del"></i>删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button
            type="primary"
            size="medium"
            @click="openDlg('2')"
            ><i class="iconfont icon-plus"></i>添加</el-button
          >
        </div>
      </div>
    </labelContent>

    <!-- // 商品配置 对话框 -->
    <el-dialog :title="dialogTitle1" width="800px" :visible.sync="dialogVisible1">
      <spConfig :formData.sync="dialogData1"></spConfig>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addOrModifyMemberBenefit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- // 优惠券配置对话框 --> 
    <el-dialog :title="dialogTitle2" width="800px" :visible.sync="dialogVisible2">
      <yhqConfig :formData.sync="dialogData2"></yhqConfig>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addOrModifyMemberCoupon">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import labelContent from "components/workComponents/labelContent";
import spConfig from "../components/sp-config";
import yhqConfig from "../components/yhq-config";
import memberComboAPI from 'api/memberManagement/memberComboAPI';
import config from "api/config";

export default {
  components: {
    labelContent,
    spConfig,
    yhqConfig
  },
  props: {
    title: {
      default: "基本信息",
    },
  },
  data() {
    return {
      imgUrl: config.imgUrl,
      rules1: {
        member_name: [{ required: true, message: "请输入", trigger: "blur" }],
        discount: [{ required: true, message: "请输入", trigger: "blur" }],
        price: [{ required: true, message: "请输入", trigger: "blur" }],
        multiple: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      baseForm: {},
      comboConfigList: [],
      comboCouponList: [],
      dialogVisible1: false,
      dialogVisible2: false,
      isEdit: false,
      dialogData1: {
        benefit_img: [],
        benefit_rank: '',
        benefit_name: '',
        benefit_content: ''
      },
      dialogData2: {},
    };
  },
  computed: {
    dialogTitle1() {
      if(this.isEdit) {
        return '编辑商品配置'
      }
      return '添加商品配置'
    }, 
    dialogTitle2() {
      if(this.isEdit) {
        return '编辑优惠券配置'
      }
      return '添加优惠券配置'
    }, 
  },
  methods: {
    openDlg(type, row) {
      this['dialogVisible'+type] = true
      this.isEdit = false
      if(row) {
        let data = {...row}
        if(type == '1'){
          data.benefit_img = data.benefit_img.split(',')
        }
        this['dialogData'+type] = data
      }
    },
    del(type, row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(type, row)
      })
    },
    _del(type, row){
      let url = 'deleteMemberBenefit'
      let data = {}
      if(type == '2') {
        url = 'deleteMemberCoupon'
        data.coupon_id = row.coupon_id
        data.mc_id = row.mc_id
      }else{
        data.benefit_id = row.benefit_id
      }
      memberComboAPI(url, data).then(() => {
        this._caozuoAfter('删除成功')
        if(type == '1') {
          this.getMemberBenefitList()
        }else{
          this.getMemberCouponList()
        }
      })
    },
    // 获取基本信息
    getBaseData() {
      let data = this.$route.query
      if(Object.keys(data).length) {
        data.price = data.price/100 || ''
        this.baseForm = data 
      }
    },
    // 获取商品配置
    async getMemberBenefitList() {
      let res = await memberComboAPI('getMemberBenefitList', {member_id: this.baseForm.member_id})
      this.comboConfigList = res.rData
    },
    hasBaseInfo() {
      if(!this.baseForm.member_id) {
        this.$message.error('请先添加基础信息')
        return false
      }
      return true
    },
    // 商品配置权益的保存和编辑
    async addOrModifyMemberBenefit() {
      if(!this.hasBaseInfo()) {
        return
      }
      let type = 'addMemberBenefit'
      if(this.dialogData1.benefit_id){
        type = 'modifyMemberBenefit'
      }
      let data = {...this.dialogData1, member_id: this.baseForm.member_id}
      data.benefit_img = data.benefit_img.join(',')
      await memberComboAPI(type, data)
      this._caozuoAfter('操作成功') 
      this.dialogVisible1 = false
      this.dialogData1 = {
        benefit_img: []
      }
      this.getMemberBenefitList()
    },
    // 优惠券赠送配置保存和编辑
    async addOrModifyMemberCoupon() {
      if(!this.hasBaseInfo()) {
        return
      }
      let type = 'addMemberCoupon'
      if(this.dialogData2.coupon_id){
        type = 'modifyMemberCoupon'
      }
      let data = {...this.dialogData2, member_id: this.baseForm.member_id}
      // 钱*100
      data.full_money *= 100
      data.reduction_money *= 100
      await memberComboAPI(type, data)
      this._caozuoAfter('操作成功') 
      this.dialogVisible2 = false
      this.dialogData2 = {}
      this.getMemberCouponList()
    },
    // 获取优惠券配置
    async getMemberCouponList() {
      let res = await memberComboAPI('getMemberCouponList', {member_id: this.baseForm.member_id})
      res.rData.forEach(item => {
        item.reduction_money /= 100
        item.full_money /= 100
      })
      this.comboCouponList = res.rData
    },
    // 修改基本信息
    async addOrModifyMemberConfigBase() {
      let type = 'addMemberConfigBase'
      if(this.baseForm.member_id){
        type = 'modifyMemberConfigBase'
      }
      let data = {...this.baseForm}
      data.price *= 100
      let res = await memberComboAPI(type, data)
      //
      this.baseForm.member_id = res.rData[0].new_id
      this._caozuoAfter('修改成功') 
    },
    _caozuoAfter(msg){
      this.$message({
        message: msg,
        type: 'success'
      })
    },
  },
  created() {
    // 获取套餐的信息
    this.getBaseData()
    console.log(this.baseForm)
    if(Object.keys(this.baseForm).length) {
      this.getMemberBenefitList()
      this.getMemberCouponList()
    }
    
  }
};
</script>
<style lang="scss" scoped>
.w300 {
  width: 400px;
}
.img1{
  width: 80px;
}
.tip {
  color: #999;
  line-height: 25px;
}
</style>
